<template>
    <div class="body">
        <TitleTips title="基本信息" />
        <el-form class="size-auto width-100" :inline="true" size="medium" label-width="130px">
            <el-row :gutter="24">
                <el-col v-for="item in baseAttr" :key="item.key" :xl="6" :lg="8">
                    <el-form-item :label="item.label + '：'">
                        <span>{{ info[item.key] || '--' }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="养护项目：">
                        <span>{{ info.maintProject || '--' }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <TitleTips title="养护范围" />
        <BaseTable :columns="columns" :data="list" style="margin-bottom: 24px;"></BaseTable>
        <TitleTips title="合同附件" />
        <FileListPreview style="margin-left: 20px;" :files="info.filesUrl" />
    </div>
</template>

<script>
import FileListPreview from '@/components/FileListPreview'

export default {
    name: 'ContractInfo',
    components: {
        FileListPreview,
    },
    props: {
        info: {
            type: Object,
            default: () => { return {} }
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            baseAttr: [
                { key: 'code', label: '合同编号', },
                { key: 'name', label: '合同名称', },
                { key: 'projectName', label: '项目名称', },
                { key: 'section', label: '标段', },
                { key: 'employerName', label: '发包人', },
                { key: 'contractorName', label: '承包人', },
                { key: 'contractDate', label: '合同签订日期', },
                { key: 'date', label: '工期', }
            ],
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '100',
                        type: 'index'
                    }
                },
                {
                    attrs: {
                        prop: 'highway',
                        label: '公路名称',
                        width: '190'
                    }
                },
                {
                    attrs: {
                        prop: 'scopeName',
                        label: '范围',
                        width: '140'
                    }
                },
                {
                    attrs: {
                        prop: 'roadSection',
                        label: '路段范围描述',
                        'min-width': '180'
                    }
                },
                {
                    attrs: {
                        prop: 'stake',
                        label: '桩号范围',
                        width: '500'
                    }
                }
            ])
        }
    },
    methods: {
        
    },
}
</script>

<style lang="scss" scoped>
.el-form--inline.size-auto.width-100 {
    ::v-deep {
        // form的label-width：72px 根据实际label宽度修改
        .el-form-item__content {
            width: calc(100% - 130px);
        }
    }    
}
.body {
    margin-top: 8px !important;
}
</style>
